/*
 * @Author: Jimmy
 * @LastModifiedBy: Jimmy
 * @Date: 2024-12-14 09:55:58
 * @LastEditTime: 2025-05-20 21:41:43
 * @FilePath: /monitor_belt/src/views/home/components/news/index.tsx
 */
import { Empty, Flex, message, Modal, Image, Button } from "antd";
import styles from "./index.module.scss";
import { Scrollbars } from "react-custom-scrollbars";
import { useEffect, useRef, useState } from "react";
import { updateAlarmState } from "@/api/message";
import { AlarmStatusEnum } from "@/utils/dictionary";

const News = (props: { list: any[] }) => {
  let { list } = props;
  const scrollRef = useRef<any>(null);

  const [records, setRecords] = useState<any[]>([]);

  useEffect(() => {
    if (list.length) {
      setRecords((prevList: any[]) => {
        return [...prevList, list?.[0]];
      });
    }
    console.log(list)
  }, [list]);
  useEffect(() => {
    goBottom();
  }, [records]);

  const goBottom = () => {
    scrollRef?.current?.scrollToBottom();
  };

  const deal = (info: any) => {
    Modal.confirm({
      title: "操作提示",
      content: "确定处理该条信息？",
      onOk: async () => {
        await updateAlarmState({ id: info.id });
        message.success("操作成功");
        records.map((item: any) => {
          if (item.id == info.id) {
            item.state = AlarmStatusEnum.CONFIRM;
          }
        });
        setRecords([...records]);
      },
    });
  };

  return (
    <Flex flex={1} className={styles.box}>
      <Scrollbars ref={scrollRef} autoHide>
        <Flex gap={10} vertical>
          {records.map((item: any, index: number) => {
            let type = "success";
            if (item.alarm_type == -1) {
              type = "off";
            } else if (item.alarm_type == 1) {
              type = "warning";
            } else if (item.alarm_type == 2 || item.alarm_type == 3) {
              type = "error";
            }
            return (
              <Flex
                gap={5}
                className={`${type} ${styles.msg_item}`}
                key={index}
              >
                <Flex flex={1} gap={8} vertical>
                  <Flex>
                    <span style={{ flexShrink: 0 }}>运 输 线：</span>
                    {item.conveyor}
                  </Flex>
                  <Flex>
                    <span style={{ flexShrink: 0 }}>设&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备：</span>
                    {item.device}
                  </Flex>
                  <Flex>
                    <span style={{ flexShrink: 0 }}>异常信息：</span>
                    <span>{item.msg}</span>
                  </Flex>
                  <Flex>
                    <span style={{ flexShrink: 0 }}>发生时间：</span>
                    {item.create_time}
                  </Flex>
                  <span
                    className={styles.btn_box}
                    style={{ marginLeft: "70px" }}
                  >
                    {item.state == AlarmStatusEnum.UNCONFIRM ? (
                      <Button size="small" onClick={() => deal(item)} danger>
                        {item.alarm_type == 3 ? "控制确认" : "解除预警"}
                      </Button>
                    ) : null}
                  </span>
                </Flex>
                <Flex style={{ width: "80px" }}>
                  {item.rel_img_url ? (
                    <Image width={80} height={80} src={item.rel_img_url} />
                  ) : null}
                </Flex>
              </Flex>
            );
          })}
        </Flex>
        {list.length == 0 ? <Empty /> : null}
      </Scrollbars>
    </Flex>
  );
};

export default News;
